<template>
  <view class="order-item" @click="goJump()">
    <view class="order-head df justify-between flex-ac">
      <view class="df head_title flex-ac">
        <text class="left_text">
          订单编号：<text class="on">{{orderInfo.orderId}}</text>
        </text>
        <view class="la_btn" v-if="orderInfo.deliveryType==='DOOR_SERVICE'">预约上门</view>
        <view class="la_btn" v-if="orderInfo.deliveryType==='LOGISTICS_PICKUP'">物流到店</view>
        <view class="la_btn" v-if="orderInfo.deliveryType==='WARDROBE_DELIVERY'">衣柜到店</view>
        <view class="la_btn" v-if="orderInfo.deliveryType==='IN_STORE'">到店订单</view>

      </view>
      <text class="order_text" v-if="orderInfo.orderStatus===10">待支付</text>
      <text class="order_text" v-if="orderInfo.orderStatus===20">待完成</text>
      <text class="order_text" v-if="orderInfo.orderStatus===30">已完成</text>
      <text class="order_text" v-if="orderInfo.orderStatus===40">售后</text>


    </view>
    <view class="order-shop">
      <view class="shop_info df">
        <text class="shop_name"  v-if="orderInfo.storeBriefDetailsVo">{{orderInfo.storeBriefDetailsVo.storeShortName}}</text>
        <view class="tag">店铺</view>
      </view>
      <view class="shop_address mgt-20 mgb-20">{{orderInfo.deliveryAddress}}</view>
      <view class="goods_list">
        <view
          class="goods-item df mgb-15"
          v-for="(item, index) in orderInfo.hemaOrderItemBriefVos"
          :key="index"
        >
         <image
          class="goods-image"
          :src="item.clothingTypeImages"
          mode="aspectFill"
          ></image>
          <view class="goods-detail_wrap flex1 mgl-24 mgt-24">
            <view class="goods-detail df flex-jc-sb">
              <view class="goods-name">{{ item.clothingType }}</view>
              <view class="goods-type">¥{{ item.price }}</view>
            </view>
            <view class="goods-price df flex-jc-sb mgt-12">
              <text class="price-symbol">{{item.washingMethod}}</text>
              <text class="price-value">

                x1
             </text>
            </view>
          </view>


        </view>
<!--        订单的详情-->
<!--        这些为订单正常流程-->
       <view class="goods_bottom df flex-jc-sb mgt-15" v-if="[10,20,30].includes(orderInfo.orderStatus) ">
         <view class="goods_lab_wrap df">
           <view>
           </view>
         </view>
         <view class="goods_bottom_right ">
           <text>订单金额：</text>
           <text class="total-price">¥{{orderInfo.totalAmount}}</text>
         </view>
       </view>
<!--        售后分为反洗 和退款-->
        <view class="goods_bottom  mgt-15" v-if="[40].includes(orderInfo.orderStatus) ">
<!--          这个为退款的-->
          <view class="df flex-col flex-jc-sb " v-if=" orderInfo.afterSalesOrder.afterSalesProcess == 'REFUND' ">
            <view class="df flex-jc-sb flex-jc flex-ac">
              <view class="padding_text">售后退货退款</view>
              <view class="padding_money">退款金额：<text>￥{{orderInfo.afterSalesOrder.refundAmount}}</text></view>
            </view>
            <view class="padding_after df mgt-24">
              <view>售后流程</view>
              <view class="padding_after_content">退款金额
<!--                这里根据状态显示售后的不同流程-->
                <text>￥{{orderInfo.afterSalesOrder.refundAmount}}</text>
              </view>
            </view>
          </view>
          <!--          这个为反洗-->
          <view class="df flex-col flex-jc-sb " v-else>
            <view class="df flex-jc-sb flex-jc flex-ac">
              <view class="padding_text">售后返洗</view>
              <view class="padding_money">申请返洗件数：<text>5</text></view>
            </view>
            <view class="padding_after df mgt-24">
              <view>售后流程</view>
              <view class="padding_after_content">退款金额<text>￥55.00</text></view>
            </view>
          </view>
        </view>


      </view>
      <view class="goods_btn_wrap df flex-jc-end">
<!--        这里根据订单专题显示按键-->
        <template v-if="orderInfo.orderStatus ===10">
          <main-button @click="handleCancelOrder(orderInfo.orderId)"  :isGradient="false" :width="'140rpx'" :height="'60rpx'" :fontSize="'28rpx'" :margin="'0 0 0 16rpx'" >取消</main-button>
          <main-button @click="orderConfirm"  :width="'140rpx'" :height="'60rpx'" :fontSize="'28rpx'" :margin="'0 0 0 16rpx'" >支付</main-button>
        </template>
<!--        待完成的按键-->
        <template  v-if="orderInfo.orderStatus ===20">
<!--          预约上门的-->
          <template v-if="orderInfo.deliveryType==='DOOR_SERVICE'" >
            <main-button @click="handlePost(orderInfo)" v-if="orderInfo.supplementStatus=='PENDING_PAYMENT'" :width="'140rpx'" :height="'60rpx'" :fontSize="'28rpx'" :margin="'0 0 0 16rpx'" >差价确认</main-button>
            <main-button @click="handleSignFor(orderInfo)" v-if="orderInfo.signStatus=='TO_BE_SIGNED'"  :width="'140rpx'" :height="'60rpx'" :fontSize="'28rpx'" :margin="'0 0 0 16rpx'" >确认签收</main-button>
          </template>
<!--          物流到店-->
          <template v-if="orderInfo.deliveryType==='LOGISTICS_PICKUP'" >
            <main-button  @click="handlePost(orderInfo)" v-if="orderInfo.supplementStatus=='PENDING_PAYMENT'" :width="'140rpx'" :height="'60rpx'" :fontSize="'28rpx'" :margin="'0 0 0 16rpx'" >差价确认</main-button>
            <main-button  @click="handleSignFor(orderInfo)" v-if="orderInfo.signStatus=='TO_BE_SIGNED'"  :width="'140rpx'" :height="'60rpx'" :fontSize="'28rpx'" :margin="'0 0 0 16rpx'" >确认签收</main-button>
          </template>
<!--          衣柜到店-->
          <template v-if="orderInfo.deliveryType==='WARDROBE_DELIVERY'" >
            <main-button  :width="'140rpx'" :height="'60rpx'" :fontSize="'28rpx'" :margin="'0 0 0 16rpx'" >打开衣柜</main-button>
            <main-button @click="handlePost(orderInfo)"  v-if="orderInfo.supplementStatus=='PENDING_PAYMENT'" :width="'140rpx'" :height="'60rpx'" :fontSize="'28rpx'" :margin="'0 0 0 16rpx'" >差价确认</main-button>
            <main-button @click="handleSignFor(orderInfo)"   v-if="orderInfo.signStatus=='TO_BE_SIGNED'" :width="'140rpx'" :height="'60rpx'" :fontSize="'28rpx'" :margin="'0 0 0 16rpx'" >确认签收</main-button>
          </template>


        </template>
        <!--          已完成-->
        <template  v-if="orderInfo.orderStatus ===30">
          <main-button  @click="goJumpAfterService(orderInfo)" :isGradient="false" :width="'140rpx'" :height="'60rpx'" :fontSize="'28rpx'" :margin="'0 0 0 16rpx'" >售后</main-button>
          <main-button @click="goJumpRate(orderInfo)"  :width="'140rpx'" :height="'60rpx'" :fontSize="'28rpx'" :margin="'0 0 0 16rpx'" >去评价</main-button>
        </template>
<!--    售后按键-->
        <template  v-if="orderInfo.orderStatus ===40">
          <main-button  :width="'140rpx'" :height="'60rpx'" :fontSize="'28rpx'" :margin="'0 0 0 16rpx'" >查看物流</main-button>
          <main-button  :width="'140rpx'" :height="'60rpx'" :fontSize="'28rpx'" :margin="'0 0 0 16rpx'" >联系商家</main-button>
        </template>
      </view>
    </view>
  </view>
</template>

<script setup>
import {ref,defineProps} from 'vue'
import {useCustomStores} from '@/utils/hook'
const {ShopStore} = useCustomStores()
const props = defineProps({
  orderInfo:{
    type:Object,
    default:()=>{}
  }
})
const emit = defineEmits(['handlePost',"handleSignFor",'handleCancelOrder'])
const goodsList = ref([
  {
    name: "T恤",
    type: "普洗",
    price: 20,
    quantity: 1,
    image: `https://readdy.ai/api/search-image?query=$%7BclothingImagePrompt%7D&width=200&height=200&seq=1001&orientation=squarish`,
  },
  {
    name: "T恤",
    type: "普洗",
    price: 20,
    quantity: 1,
    image: `https://readdy.ai/api/search-image?query=$%7BclothingImagePrompt%7D&width=200&height=200&seq=1002&orientation=squarish`,
  },
  {
    name: "T恤",
    type: "普洗",
    price: 20,
    quantity: 1,
    image: `https://readdy.ai/api/search-image?query=$%7BclothingImagePrompt%7D&width=200&height=200&seq=1003&orientation=squarish`,
  },
]);
function  goJump(){
  //这里分为售后订单和正常订单
  if(props.orderInfo.orderStatus==40){
    uni.navigateTo({
      url:"/pages/cleaningOrder/afterSalesOrderDetails?orderId="+props.orderInfo.orderId
    })
  }else {
    uni.navigateTo({
      url:"/pages/cleaningOrder/orderDetails?orderId="+props.orderInfo.orderId
    })
  }

}
function handlePost(item){
  emit('handlePost',item)
}
function handleSignFor(item){
  emit('handleSignFor',item)
}
function handleCancelOrder(orderId){
  emit('handleCancelOrder',orderId)
}
function goJumpAfterService(item){
  uni.navigateTo({
    url:"/pagesShop/afterService/index?orderId="+item.orderId
  })
}
function goJumpRate(item){
  uni.navigateTo({
    url:"/pages/cleaningOrder/orderDetails?orderId="+item.orderId+'&isOpen='+1
  })
}
/*****这里订单待支付的情况处理************/
function orderConfirm(){
  ShopStore.setPlaceOrderInfo({
    storeId:props.orderInfo.storeId,
    orderNo:props.orderInfo.orderId,
    categories:props.orderInfo.hemaOrderItemBriefVos.map(item=>{
      return{
        ...item,
        "washType": "STORE_WASH",
      }
    }),
  })
  uni.navigateTo({
    url: '/pagesMy/user/pay?type=shopOrder&totalPrice='+props.orderInfo.totalAmount
  })
}
</script>

<style lang="scss" scoped>
.order-item{
  width: 100%;
  background-color: #FFFFFF;
  border-radius: 16rpx;
  margin-bottom: 20rpx;
  .order-head{
    box-sizing: border-box;
    width: 100%;
    height: 90rpx;
    padding: 0 32rpx;
    border-bottom: 1rpx solid #E5E5E5;
    .head_title{
      .left_text{
        font-size: 28rpx;
        color: #333333;
        font-weight: bold;
      }
      .on{
        font-weight:500;
      }
    }
    .la_btn{
      margin-left: 10rpx;
      width: 136rpx;
      height: 52rpx;
      background: #E5F2FF;
      border-radius: 8rpx 8rpx 8rpx 8rpx;
      text-align: center;
      line-height: 52rpx;
    }
    .order_text{
      font-weight: 400;
      font-size: 28rpx;
      color: #BE1C2D;
    }
  }
  .order-shop{
    width: 100%;
    box-sizing: border-box;
    padding: 0 24rpx;
    .shop_info{
      padding-top: 20rpx;
      width: 100%;
      .shop_name{
        font-weight: bold;
        font-size: 32rpx;
        color: #000000;
      }
      .tag{
        margin-left: 10rpx;
        padding: 5rpx 8rpx;
        background: #0080FF;
        border-radius: 6rpx;
        font-weight: 400;
        font-size: 24rpx;
        color: #FFFFFF;
      }
    }
    .shop_address{
      font-weight: 400;
      font-size: 28rpx;
      color: #999999;
    }
    .goods_list{
      border-top: 1rpx solid #E5E5E5;
      border-bottom: 1rpx solid #E5E5E5;
      padding-top: 20rpx;
      width: 100%;
      .goods-item{
        .goods-image{
          width: 120rpx;
          height: 120rpx;
          border-radius: 8rpx;
          //background-color: #f5f5f5;
          flex-shrink: 0;
        }
        .goods-detail{
          .goods-name{
            font-size: 32rpx;
            color: #333333;
          }
          .goods-type{
            font-size: 32rpx;
            color: #333333;
          }
        }
        .goods-price{
          .price-symbol{
            font-size: 32rpx;
            color: #999999;
          }
          .price-value{
            font-size: 32rpx;
            color: #999999;
          }
        }
      }
      .goods_bottom{
        margin-bottom: 20rpx;
        .goods_lab_wrap{

        }
        .goods_bottom_right{
          font-size: 32rpx;
          color: #333333;
          .total-price{
            font-size: 32rpx;
            color: #ff3333;
          }
        }
      }

    }
    .goods_btn_wrap{
      width: 100%;
      padding: 30rpx 0;
    }
  }

}
.padding_text{
  padding: 15rpx 30rpx;
  background: #F3F3F3;
  border-radius: 8rpx;
  font-size: 28rpx;
  font-weight: bold;

}
.padding_money{
  font-size: 28rpx;
  font-weight: bold;
  >text{
    color: #ff3333;
    font-weight: 500;
  }
}
.padding_after{
  padding: 15rpx 30rpx;
  background: #F3F3F3;
  border-radius: 8rpx;
  font-size: 28rpx;
  font-weight: bold;
  .padding_after_content{
    margin-left: 20rpx;
    color: #999 ;
    font-weight: 500;
    >text{
      color: #ff3333;
      font-weight: 500;
    }

  }
}
.padding_content{
  padding: 15rpx 30rpx;
  background: #F3F3F3;
  border-radius: 8rpx;
  font-size: 28rpx;
  font-weight: bold;
}
</style>
